<template>
    <div class="clientpond">
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="微提醒" title="长期保"></crumbs>
        </div>
        <div class="paddingbox">
            <div class="innertabbox">
                <div
                    :class="{
                        innertabitem: true,
                        innertabactive: innertabflag === 0
                    }"
                    @click="changeinnertab(0)"
                >
                    已投保客户
                </div>
                <div
                    :class="{
                        innertabitem: true,
                        innertabactive: innertabflag === 1
                    }"
                    @click="changeinnertab(1)"
                >
                    未投保客户
                </div>
                <div
                    :class="{
                        innertabitem: true,
                        innertabactive: innertabflag === 2
                    }"
                    @click="changeinnertab(2)"
                >
                    日投余额不足
                </div>
            </div>
            <div class="contentbox" v-show="innertabflag === 0">
                <div class="contenttopform">
                    <div class="formitrm">
                        <div class="lable">搜索：</div>
                        <div class="lablecontent">
                            <el-input
                                placeholder="请输入"
                                v-model="tabonecompanyname"
                                clearable
                                @input="changetabonecompanyname"
                            ></el-input>
                        </div>
                    </div>
                </div>
                <el-table
                    :data="tabonebacltabledate"
                    @sort-change="sort_changeone"
                    style="width: 100%"
                    
                    :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }"
                >
                    <el-table-column prop="companyName" label="客户名称" />
                    <el-table-column
                        prop="businessPrincipal"
                        label="商务负责人"
                    />
                    <el-table-column prop="deptName" label="所属分组" />
                    <el-table-column prop="ensureCount" label="当前在保">
                        <template #default="scope">
                            <div>{{ scope.row.ensureCount }}人</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="productOpenTime"
                        sortable
                        label="开通时间"
                    />
                    <el-table-column
                        prop="accountBalance"
                        sortable
                        label="账户余额"
                    >
                        <template #default="scope">
                            <div class="price">
                                ￥{{ scope.row.accountBalance }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <span
                                style="margin-right: 5px"
                                class="pointer blue"
                                @click="todetail(scope.row)"
                                >查看详情</span
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                    :total="tabonebacltotal"
                    :currentPage="tabonebaclpagenum"
                    :pageSize="tabonebaclpagesize"
                    @SizeChange="changetabonebaclpagesize"
                    @CurrentChange="changetabonebaclpagenum"
                ></pagination>
            </div>
            <div class="contentbox" v-show="innertabflag === 1">
                <div class="contenttopform">
                    <div class="formitrm">
                        <div class="lable">搜索：</div>
                        <div class="lablecontent">
                            <el-input
                                placeholder="请输入"
                                v-model="tabtwocompanyname"
                                clearable
                                @input="changetabtwocompanyname"
                            ></el-input>
                        </div>
                    </div>
                </div>
                <el-table
                    :data="tabtwobacltabledate"
                    style="width: 100%"
                    
                    @sort-change="sort_changetwo"
                    :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }"
                >
                    <el-table-column prop="companyName" label="客户名称" />
                    <el-table-column
                        prop="businessPrincipal"
                        label="商务负责人"
                    />
                    <el-table-column prop="deptName" label="所属分组" />
                    <el-table-column
                        prop="productOpenTime"
                        sortable
                        label="开通时间"
                    />
                    <el-table-column
                        prop="accountBalance"
                        sortable
                        label="账户余额"
                    >
                        <template #default="scope">
                            <div class="price">
                                ￥{{ scope.row.accountBalance }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <span
                                style="margin-right: 5px"
                                class="pointer blue"
                                @click="todetail(scope.row)"
                                >查看详情</span
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                    :total="tabtwobacltotal"
                    :currentPage="tabtwobaclpagenum"
                    :pageSize="tabtwobaclpagesize"
                    @SizeChange="changetabtwobaclpagesize"
                    @CurrentChange="changetabtwobaclpagenum"
                ></pagination>
            </div>
            <div class="contentbox" v-show="innertabflag === 2">
                <div class="contenttopform">
                    <div class="formitrm">
                        <div class="lable">搜索：</div>
                        <div class="lablecontent">
                            <el-input
                                placeholder="请输入"
                                v-model="tabthreecompanyname"
                                clearable
                                @input="changetabthreecompanyname"
                            ></el-input>
                        </div>
                        <div class="lable" style="margin-left: 20px">
                            所属分组：
                        </div>
                        <el-select
                            v-model="deptId"
                            class="m-2"
                            @change="changedeptId"
                            placeholder="请选择"
                            style="width: 240px"
                            clearable
                        >
                            <el-option
                                v-for="item in deptoptions"
                                :key="item.deptId"
                                :label="item.deptName"
                                :value="item.deptId"
                            />
                        </el-select>
                        <div class="lable" style="margin-left: 20px">
                            所属商务：
                        </div>
                        <el-select
                            @focus="focussaleId"
                            @change="getgetbalanceinsufficient"
                            v-model="saleId"
                            class="m-2"
                            clearable
                            placeholder="请选择"
                            style="width: 240px"
                        >
                            <el-option
                                v-for="item in xsoptions"
                                :key="item.saleId"
                                :label="item.saleName"
                                :value="item.saleId"
                            />
                        </el-select>
                    </div>
                </div>
                <el-table
                    :data="tabthreebacltabledate"
                    style="width: 100%"
                    
                    :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }"
                >
                    <el-table-column prop="companyName" label="客户名称" />
                    <el-table-column prop="saleName" label="商务负责人" />
                    <el-table-column prop="deptName" label="所属分组" />
                    <el-table-column prop="wesureBalance" label="当前余额">
                        <template #default="scope">
                            <div>￥{{ scope.row.wesureBalance }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tomorrowTotalCost" label="明日扣费">
                        <template #default="scope">
                            <div>￥{{ scope.row.tomorrowTotalCost }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="costOverBalance" label="扣费后余额">
                        <template #default="scope">
                            <div class="price">
                                ￥{{ scope.row.costOverBalance }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <span
                                style="margin-right: 5px"
                                class="pointer blue"
                                @click="todetail(scope.row)"
                                >查看详情</span
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <pagination :total="tabthreebacltotal" :currentPage="tabthreebaclpagenum" :pageSize="tabthreebaclpagesize"
                    @SizeChange="changetabthreebaclpagesize" @CurrentChange="changetabthreebaclpagenum"></pagination> -->
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import crumbs from '../../../components/crumbs.vue'
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { shake } from '../../../utils/utils'
import {
    getgetperiodinsuredcustomerapi,
    getgetperioduninsuredcustomerapi,
    getgetbalanceinsufficientapi
} from '../../../api/microAlerts'
import { getDeptList, getSalesmanList } from '../../../api/clients/signClient'
import { ElMessage, ElMessageBox } from 'element-plus'
import { log } from 'console'
const router = useRouter()
const route = useRoute()

const deptId = ref('')
const saleId = ref('')
const focussaleId = () => {
    if (deptId.value === '') {
        ElMessage({
            type: 'warning',
            message: '请先选择部门'
        })
    } else {
        getSalesmanList({
            auditStatus: 1,
            deptId: deptId.value
        }).then((res: any) => {
            xsoptions.value = res
        })
    }
}
const todetail = (val: any) => {
    router.push({
        path: 'detailPeriodInsure',
        query: {
            id: btoa(val.dealId),
            companyId: btoa(val.companyId)
        }
    })
}
const sort_changeone = (val: any) => {
    sortfileone.value = val.prop
    sorttypeone.value = val.order
    getgetperiodinsuredcustomer()
}
const sort_changetwo = (val: any) => {
    console.log(val)
    sortfiletwo.value = val.prop
    sorttypetwo.value = val.order
    getgetperioduninsuredcustomer()
}
const sortfileone = ref('')
const sorttypeone = ref('')
const sortfiletwo = ref('')
const sorttypetwo = ref('')

const getgetperiodinsuredcustomer = () => {
    getgetperiodinsuredcustomerapi({
        pageNum: tabonebaclpagenum.value,
        pageSize: tabonebaclpagesize.value,
        searchText: tabonecompanyname.value,
        sortField:
            sortfileone.value === null
                ? ''
                : sortfileone.value.replace('ending', ''),
        sortType:
            sorttypeone.value === null
                ? ''
                : sorttypeone.value.replace('ending', '')
    }).then((res: any) => {
        console.log(res, '111')
        tabonebacltotal.value = res.totalCount
        tabonebacltabledate.value = res.list
    })
}
const getgetperioduninsuredcustomer = () => {
    getgetperioduninsuredcustomerapi({
        pageNum: tabtwobaclpagenum.value,
        pageSize: tabtwobaclpagesize.value,
        searchText: tabtwocompanyname.value,
        sortField:
            sortfiletwo.value === null
                ? ''
                : sortfiletwo.value.replace('ending', ''),
        sortType:
            sorttypetwo.value === null
                ? ''
                : sorttypetwo.value.replace('ending', '')
    }).then((res: any) => {
        console.log(res, '222')
        tabtwobacltotal.value = res.totalCount
        tabtwobacltabledate.value = res.list
    })
}
const getgetbalanceinsufficient = () => {
    getgetbalanceinsufficientapi({
        searchText: tabthreecompanyname.value,
        deptId: deptId.value,
        saleId: saleId.value
    }).then((res: any) => {
        console.log(res, '333')
        tabthreebacltabledate.value = res.list
    })
}
// onMounted(() => {
//     getgetperiodinsuredcustomer()
// })
onActivated(() => {
    getgetperiodinsuredcustomer()
})
const back = () => {
    window.history.back()
}
const tabtwocompanyname = ref('')
const tabthreecompanyname = ref('')
const tabonecompanyname = ref('')
const changetabtwocompanyname = (val: any) => {
    shake(getgetperioduninsuredcustomer, 400)
}
const changetabonecompanyname = (val: any) => {
    shake(getgetperiodinsuredcustomer, 400)
}
const changetabthreecompanyname = (val: any) => {
    shake(getgetbalanceinsufficient, 400)
}
const changedeptId = () => {
    saleId.value = ''
    xsoptions.value = []
    getgetbalanceinsufficient()
}
const xsoptions = ref<any>([])
const tabonebacltabledate = ref<any>([])
const tabonebacltotal = ref(0)
const tabonebaclpagesize = ref(10)
const tabonebaclpagenum = ref(1)
const changetabonebaclpagesize = (val: any) => {
    tabonebaclpagesize.value = val
    tabonebaclpagenum.value = 1
    getgetperiodinsuredcustomer()
}
const changetabonebaclpagenum = (val: any) => {
    tabonebaclpagenum.value = val
    getgetperiodinsuredcustomer()
}
const tabtwobacltabledate = ref<any>([])
const tabtwobacltotal = ref(0)
const tabtwobaclpagesize = ref(10)
const tabtwobaclpagenum = ref(1)
const changetabtwobaclpagesize = (val: any) => {
    tabtwobaclpagesize.value = val
    tabtwobaclpagenum.value = 1
    getgetperioduninsuredcustomer()
}
const changetabtwobaclpagenum = (val: any) => {
    tabtwobaclpagenum.value = val
    getgetperioduninsuredcustomer()
}
const tabthreebacltabledate = ref<any>([])
const tabthreebacltotal = ref(0)
const tabthreebaclpagesize = ref(10)
const tabthreebaclpagenum = ref(1)
const changetabthreebaclpagesize = (val: any) => {
    tabthreebaclpagesize.value = val
    tabthreebaclpagenum.value = 1
    getgetbalanceinsufficient()
}
const changetabthreebaclpagenum = (val: any) => {
    tabthreebaclpagenum.value = val
    getgetbalanceinsufficient()
}
const innertabflag = ref(0)
const changeinnertab = (i: number) => {
    innertabflag.value = i
    if (i === 0) {
        console.log('已投保客户')
        getgetperiodinsuredcustomer()
    } else if (i === 1) {
        console.log('未投保客户')
        getgetperioduninsuredcustomer()
    } else if (i === 2) {
        console.log('日投余额不足')
        getgetbalanceinsufficient()
        getDeptList({ type: 1 }).then((res: any) => {
            console.log(res)
            deptoptions.value = res
        })
    }
}
const deptoptions = ref<any>([])
</script>
<style lang="scss" scoped>
.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;

    .contentbox {
        padding: 16px;
        background-color: #ffffff;
        width: 100%;
        box-sizing: border-box;
        min-height: 300px;
        display: block;

        .contenttopform {
            margin-bottom: 31px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .formitrm {
                display: flex;
                align-items: center;

                .lable {
                    font-size: 14px;
                    margin-right: 8px;
                }
            }
        }
    }
}

.innertabactive {
    color: #0256ff !important;
    font-weight: 700;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.innertabbox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .innertabitem {
        cursor: pointer;
        min-width: 100px;
        height: 41px;
        text-align: center;
        line-height: 41px;
        color: #a7aab2;
        font-size: 14px;
        background-color: #efeef1;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        border-top: 1px solid #e3e0e8;
        border-right: 1px solid #e3e0e8;
    }
}

.blue {
    color: #0256ff;
}

.price {
    color: #ff7642;
}
</style>
